<template>
  <div class="container">
    <!-- 左侧菜单 -->
    <div class="sidebar">
      <button @click="setActive(0)" :class="['btn', { active: activeIndex === 0 }]">
        {{ $t("account.balanceType1") }}
      </button>
      <button @click="setActive(2)" :class="['btn', { active: activeIndex === 2 }]">
        {{ $t("account.balanceType2") }}
      </button>
      <button @click="setActive(1)" :class="['btn', { active: activeIndex === 1 }]">
        {{ $t("account.balanceType3") }}
      </button>
    </div>

    <!-- 右侧内容 -->
    <div class="content" v-if="info !== null">
      <!-- 顶部余额部分 -->
      <div class="summary">
        <div class="card">
          <p class="amount">¥{{ info.now_money }}</p>
          <p class="unit">{{ $t("account.balance") }}</p>
        </div>
        <div class="card">
          <p class="amount">¥{{ info.recharge.toFixed(2) }}</p>
          <p class="unit">{{ $t("account.recharge") }}</p>
        </div>
        <div class="card">
          <p class="amount">¥{{ info.orderStatusNum.sum_price }}</p>
          <p class="unit">{{ $t("account.consumption") }}</p>
        </div>
      </div>

      <!-- 明细列表 -->
      <div class="details">
        <div v-for="(item, index) in groupDataByMonth(billList)" :key="index">
          <div class="month">{{ index }}</div>
          <div class="entry" v-for="(oitem, index) in item" :key="oindex">
            <div class="item">
              <p class="name">{{ oitem.mark }}</p>
              <p class="positive">+{{ oitem.number }}</p>
            </div>
            <div class="date">
              {{ oitem.add_time }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";

// 定义菜单项和选中的索引
const menuItems = ["账单明细", "收入明细", "支出明细"];
const activeIndex = ref(0);

// 切换选中状态
const setActive = (index) => {
  activeIndex.value = index;
  getBillList();
};

const info = ref(null);
const getInfo = async () => {
  try {
    const res = await axios.get(`${apiUrl}/user`, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });

    info.value = res.data.data;
  } catch (e) {}
};
const billList = ref([]);
const getBillList = async () => {
  try {
    const res = await axios.get(
      `${apiUrl}/pc/get_balance_record/${activeIndex.value}?page=1&limit=1000`,
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
        },
      }
    );

    billList.value = res.data.data.list;
  } catch (e) {}
};

function groupDataByMonth(dataList) {
  return dataList.reduce((acc, item) => {
    // 将时间戳转换为日期对象
    const date = new Date(item.add_time);

    // 获取年份和月份
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
    // 生成年份-月份的键
    const key = `${year}-${month}`;

    // 如果该月份不存在，初始化为空数组
    if (!acc[key]) {
      acc[key] = [];
    }
    // 将当前项添加到对应的月份数组中
    acc[key].push(item);

    return acc;
  }, {});
}
onMounted(async () => {
  await getInfo();
  getBillList();
});
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  position: relative;
  margin: 0 auto;

  .sidebar {
    position: absolute;
    left: -120px; // 负位置
    top: 0;

    .btn {
      display: block;
      margin-bottom: 10px;
      padding: 10px 20px;
      background-color: #f5f5f5;
      border: none;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;

      &:hover {
        background-color: #e0e0e0;
      }

      &.active {
        background-color: black;
        color: white;
      }
    }
  }

  .date {
    text-align: left;
    margin-top: 15px;
    color: #666;
  }

  .content {
    width: 900px;
    text-align: center;
    background-color: #ffffff;

    .summary {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;

      .card {
        background-color: #f5f5f5;
        padding: 20px;
        width: 290px;
        border-bottom: 4px solid #000;

        .amount {
          font-size: 28px;
          margin-bottom: 5px;
          font-weight: bold;
        }

        .unit {
          color: #666;
        }
      }
    }

    .details {
      .month {
        background-color: #e8e8e8;
        padding: 5px 10px;
        text-align: left;
        color: #666;
      }

      .entry {
        padding: 20px 10px;
        border-bottom: 1px solid #f0f0f0;
        .item {
          display: flex;
          justify-content: space-between;

          .name {
            color: #666;
          }
        }
        .positive {
          color: green;
        }

        .negative {
          color: red;
        }
      }
    }
  }
}
</style>
